<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="right_box">
        <dv-border-box3>
          <div class="box">
            <div class="province">
              <ul>
                <li style="margin-left: 1vw;">所在省份</li>
                <li>购买设备数</li>
              </ul>
            </div>
            <div id="main"></div>
          </div>
        </dv-border-box3>
    </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from "vue";
import * as echarts from "echarts";

onMounted(() => {
  var chartDom = document.getElementById("main");
  var myChart = echarts.init(chartDom);
  let data = [1, 3, 9, 2, 4, 7, 3, 5, 3, 7, 1, 1, 2, 1, 1, 1, 2];
  let className = ["山东省", "江西省", "河南省", "河北省", "陕西省", "湖北省","山西省","内蒙古自治区","安徽省","浙江省","宁夏回族自治区","四川省","贵州省","广西壮族自治区", "辽宁省", "重庆市", "海南省"];
  let option = {
    // backgroundColor: "#041125",
    grid: {
      left: "15%",
      right: "15%",
      bottom: "0%",
      top: "18%",
      containLabel: true,
    },
    xAxis: {
      show: false,
      type: "value",
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          show: true,
          textStyle: {
            color: "#D1E6EB",
            fontSize: 14,
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: className,
      },
    ],
    series: [
      {
        type: "bar",
        zlevel: 1,
        label: {
          //数据显示的位置
          show: true, //数值是否显示
          // rotate: 60, //数值显示的角度
          position: "right", //数值相对于柱状图显示的位置
          textStyle: {
            color: "#FFFFFF", // 标签字体颜色
            fontSize: 14, // 标签字体大小
            fontStyle: "italic", // 标签字体斜体
            fontFamily: "baba", // 标签字体
          },
        },

        itemStyle: {
          normal: {
            barBorderRadius: 0,
            color: {
              type: "linear",
              colorStops: [
                {
                  offset: 0,
                  color: "#00ffff",
                },
                {
                  offset: 1,
                  color: "rgba(255, 255, 255, 0)",
                },
              ],
            },
          },
        },
        barWidth: 20,
        emphasis: {
          disabled: true,
          focus: "none",
        },
        data: data,
      },
      {
        // name: "外圆",
        type: "scatter",
        emphasis: {
          scale: false,
        },
        symbol: "rect",
        symbolSize: [4, 18], // 进度条白点
        itemStyle: {
          barBorderRadius: [30, 0, 0, 30],
          color: "#00183e00",
          shadowColor: "rgba(94, 238, 255, 0.5)",
          shadowBlur: 1,
          borderWidth: 1,
          opacity: 1,
        },
        z: 2,
        data: data,
        animationDelay: 500,
      },
    ],
  };
  myChart.setOption(option)
});
</script>

<style scoped>
.right_box {
    width: 23vw;
    height: 85vh;
    margin-top: 2vh;
    margin-right: 1vw;
}

.box {
  width: 100%;
  height: 70vh;
  position: relative;
}

.province {
  width: 80%;
  height: 5.8vh;
  position: absolute;
  background: #00ffff;
  left: 2.4vw;
  top: 5vh;
}

.province ul {
  width: 100%;
  height: 100%;
}

.province ul li {
  width: 28%;
  height: 100%;
  float: left;
  line-height: 4vh;
  font-size: 18px;
  color: #00183e;
  padding-top: 1vh;
  /* font-weight: bold; */
}

.box #main {
  width: 100%;
  height: 100%;
}

</style>